<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label" class="tab-title">
          案件
          <i class="tag-right">3</i>
        </span>
        <statistics-search-case />
      </el-tab-pane>
      <el-tab-pane name="two">
        <span slot="label" class="tab-title">
          接处警
          <i class="tag-right">2</i>
        </span>用户管理
      </el-tab-pane>
      <el-tab-pane name="three">
        <span slot="label" class="tab-title">
          重点人员
          <i class="tag-right">2</i>
        </span>用户管理
      </el-tab-pane>
      <el-tab-pane name="four">
        <span slot="label" class="tab-title">
          常口
          <i class="tag-right">2</i>
        </span>用户管理
      </el-tab-pane>
      <el-tab-pane name="five">
        <span slot="label" class="tab-title">
          暂口
          <i class="tag-right">0</i>
        </span>用户管理
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import statisticsSearchCase from './search-tabs/case';

export default {
  name: 'statisticsSearch',
  components: {
    statisticsSearchCase
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.warn(tab, event);
    }
  }
};
</script>
<style lang="scss" scoped>
.tab-title {
  position: relative;
  .tag-right {
    font-style: normal;
    font-size: 12px;
    text-decoration: none;
    position: absolute;
    right: -18px;
    top: -10px;
    width: 15px;
    height: 15px;
    border: 1px solid #333;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
  }
}
</style>
